<template>
  <div>
    <van-nav-bar
      title="城市列表"
      left-text="返回"
      fixed
      left-arrow
      @click-left="$router.back()"
    />
    <!-- 城市列表 -->
    <van-index-bar :sticky="false" :index-list="indexList">
      <!-- 当前城市 -->
      <van-index-anchor index="当前城市" />
      <van-cell @click="$router.push('/homepage')" :title="$store.state.home.cityId.label" />
      <!-- 热门城市 -->
      <van-index-anchor index="热" />
      <van-cell @click="getCityValue(item)" v-for="item in hotList" :key="item.value" :title="item.label" />
      <!-- A-Z城市 -->
      <div v-for="(item, index) in newList" :key="index">
        <van-index-anchor :index="item.index" />
        <van-cell
        @click="getCityValue(item)"
          v-for="item in item.list"
          :key="item.value"
          :title="item.label"
        />
      </div>
    </van-index-bar>
  </div>
</template>

<script>
import { getCity, getHot } from '@/api/home'
export default {
  name: 'CityList',
  data () {
    return {
      indexList: ['#', '热'], // 索引
      newList: [], // 处理完的数据
      hotList: [] // 热门城市
    }
  },
  async created () {
    // 获取热门城市
    const res = await getHot()
    this.hotList.push(...res.body)
    // 请求接口获取城市数据
    const { body } = await getCity()
    // 声明一个空对象
    const obj = {}
    // 遍历城市数据
    // eslint-disable-next-line array-callback-return
    body.map(item => {
      // 获取每个城市的拼音开头第一个字母大写
      const key = item.pinyin[0].toUpperCase()
      // 判断对象是否有key
      obj[key] ? obj[key].push(item) : (obj[key] = [item])
    })
    for (const k in obj) {
      // 把对象中的每一条数据都push进新数组 ，添加一个属性，值为首字母，其他数据不动
      this.newList.push({ index: k, list: obj[k] })
    }
    // 给处理好的数组排序，按照字母a-z排序，排序好后遍历数组将字母添加进indexList数组中作为导航索引
    this.newList
      .sort((a, b) => a.index.localeCompare(b.index))
      .forEach(item => this.indexList.push(item.index))
  },
  methods: {
    getCityValue (value) {
      // 把点击当前项数据覆盖掉本地数据
      localStorage.setItem('hk-city', JSON.stringify(value))
      this.$router.push('/homepage')
    }
  }
}
</script>

<style lang="less" scoped>
  .van-index-bar {
    margin-top: 46px;
    ::v-deep .van-index-anchor {
      background-color: #f7f8fa;
    }
    /deep/ .van-index-bar__index {
      padding: 4px 6px;
    }
  }
</style>
